{% from "macros/forms.html" import form_input, form_select %}

{% set create = user_id == 0 | default('true') %}

{% set form_error = form_error | default({}) %}
{% set roles = roles | default([]) %}
{% set organizations = organizations | default([]) %}
{% set user_role_ids = user.roles | map(attribute='id') | list | default([]) %}

<script type="text/javascript">
  if (typeof htmx !== 'undefined' && htmx.onLoad) {
    htmx.onLoad(function (elt) {
      initChoices('user-role-select', 'roles');
    });
  } else {
    initChoices('user-role-select', 'roles');
  }

  function generatePassword(
    length = 20,
    characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$'
  ) {
    return Array.from(crypto.getRandomValues(new Uint32Array(length)))
      .map((x) => characters[x % characters.length])
      .join('');
  }
</script>

<div class="bg-base-100 p-4">
  <div class="w-1/2 ml-[10%]">
    {% if create -%}
      <h1 class="text-3xl font-bold mb-5">{{ submit_text }}</h1>
    {% else -%}
      {% include "user/user_form_warning.html" %}
    {% endif -%}
  </div>
  <p class="text-base-content/60 text-[0.7rem] mb-5 w-1/2 ml-[10%]">ID: {{ user_id }}</p>

  <form id="user-form" class="w-3/4 ml-[10%]" {{ form_action }} hx-swap="innerHTML"  hx-target="#form-container" hx-target-error="#form-container">
    {% include "partials/admin_form_error.html" %}

    {{ form_input('Username', 'username', user.username, form_error.username, width="w-3/4") }}
    {{ form_input('Name', 'name', user.name, form_error.name, width="w-3/4") }}

    <div x-data="{ showPassword: false }" class="join gap-1 w-3/4">
      <label class="floating-label mb-5 input validator w-full shrink">
        <span>Password</span>
        <input id="user-password"
               :type="showPassword ? 'text' : 'password'"
               placeholder="Password"
               class="input input-md validator {% if form_error.password %}input-error{% endif %}"
               name="password"
               {% if create %}required hx-preserve{% endif %} />
        <div x-show="!showPassword" x-on:click="showPassword = !showPassword">{{ heroicon_solid("eye", class="cursor-pointer") }}</div>
        <div x-show="showPassword" x-on:click="showPassword = !showPassword">{{ heroicon_solid("eye-slash", class="cursor-pointer") }}</div>
      </label>
      <button type="button"
              class="btn btn-primary grow"
              id="generate-password"
              onclick="document.getElementById('user-password').value = generatePassword();">Generate Password</button>
    </div>

    <div class="mb-5 w-3/4">
      <select name="roles[]" multiple required id="user-role-select">
        {% for role in roles %}
          <option value="{{ role.id }}" {% if role.id in user_role_ids %}selected{% endif %}>
            {{ role.name }} - {{ role.description | default(' ', true) | truncate(50, true) }}
          </option>
        {% endfor %}
      </select>
    </div>

    {{ form_select('Organization', 'organization', user.organization, organizations, width="w-3/4") }}

    <input type="submit" class="btn btn-primary w-3/4" value="{{ submit_text }}" />
  </form>
</div>
